<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-Vue的生命周期</title>
</head>
<body>
<div id="app">
    <span v-text="msg" id="spn"></span><br>
    <button @click="myDestroy()">销毁</button><br>
    <button @click="updateMsg()">修改msg</button>
</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            show() {
                console.log("show show show");
            },
            myDestroy(){
                this.$destroy();
            },
            updateMsg(){
                this.msg = "fuck";
            }
        },
        beforeCreate() {//没有初始化data和methods
            console.log("--------------------------------beforeCreate--------------------------------");
            console.log("msg = " + this.msg);
            this.show();
        },
        created(){//初始化data和methods
            console.log("--------------------------------created--------------------------------");
            console.log("msg = " + this.msg);
            this.show();
        },
        beforeMount(){//生成虚拟dom树
            console.log("--------------------------------beforeMount--------------------------------");
            var spnEle = document.getElementById("spn");
            console.log(spnEle.innerHTML);
        },
        mounted(){//将虚拟dom树变成了真实dom树
            console.log("--------------------------------mounted--------------------------------");
            var spnEle = document.getElementById("spn");
            console.log(spnEle.innerHTML);

        },
        beforeDestroy(){
            console.log("--------------------------------beforeDestroy--------------------------------");
        },
        destroyed(){
            console.log("--------------------------------destroyed--------------------------------");
        },

        beforeUpdate(){//修改后，生成虚拟dom树
            console.log("--------------------------------beforeUpdate--------------------------------");
            var spnEle = document.getElementById("spn");
            console.log(spnEle.innerHTML);
        },
        updated(){//修改后，生成真实dom树
            console.log("--------------------------------updated--------------------------------");
            var spnEle = document.getElementById("spn");
            console.log(spnEle.innerHTML);
        }

    })

</script>
</html>